<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- Logo和标题区域 -->
      <div class="login-header">
        <div class="logo-wrapper">
          <svg class="logo-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" rx="12" fill="url(#logoGradient)"/>
            <path d="M24 12C17.373 12 12 17.373 12 24C12 30.627 17.373 36 24 36C30.627 36 36 30.627 36 24C36 17.373 30.627 12 24 12ZM28 25H25V28C25 28.552 24.552 29 24 29C23.448 29 23 28.552 23 28V25H20C19.448 25 19 24.552 19 24C19 23.448 19.448 23 20 23H23V20C23 19.448 23.448 19 24 19C24.552 19 25 19.448 25 20V23H28C28.552 23 29 23.448 29 24C29 24.552 28.552 25 28 25Z" fill="white"/>
            <defs>
              <linearGradient id="logoGradient" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
                <stop stop-color="#5FBFAA"/>
                <stop offset="1" stop-color="#7DD3C0"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <h1 class="system-title">AI体质分析</h1>
        <p class="system-subtitle">Constitution Analysis System</p>
      </div>

      <!-- 登录表单 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        size="large"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            :prefix-icon="User"
            clearable
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            show-password
            @keyup.enter="handleLogin"
          />
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="login-button"
            :loading="loading"
            @click="handleLogin"
          >
            登 录
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button
            class="register-button"
            @click="goToRegister"
          >
            注 册
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 底部信息 -->
      <div class="login-footer">
        <p>基于深度学习的体质成分自动分析系统</p>
        <p class="copyright">© 2025 AI体质分析系统 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, DataAnalysis } from '@element-plus/icons-vue'

const router = useRouter()
const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = reactive({
  username: '',
  password: '',
  remember: false
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  await loginFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      
      // 模拟登录请求 - 接受任何账号密码
      setTimeout(() => {
        loading.value = false
        
        // 原型阶段：接受任何非空用户名和密码
        localStorage.setItem('isLoggedIn', 'true')
        localStorage.setItem('username', loginForm.username)
        
        ElMessage.success('登录成功！')
        router.push('/main')
      }, 800)
    }
  })
}

// 跳转到注册页
const goToRegister = () => {
  router.push('/register')
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;

  .bg-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 20s infinite ease-in-out;

      &.circle-1 {
        width: 300px;
        height: 300px;
        top: -100px;
        left: -100px;
        animation-delay: 0s;
      }

      &.circle-2 {
        width: 200px;
        height: 200px;
        bottom: -50px;
        right: 100px;
        animation-delay: 5s;
      }

      &.circle-3 {
        width: 150px;
        height: 150px;
        top: 50%;
        right: -50px;
        animation-delay: 10s;
      }
    }
  }

  .login-card {
    position: relative;
    width: 450px;
    padding: 50px 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;

    .login-header {
      text-align: center;
      margin-bottom: 40px;

      .logo-wrapper {
        margin-bottom: 24px;
        display: inline-block;
        animation: pulse 2s infinite;

        .logo-icon {
          width: 80px;
          height: 80px;
          filter: drop-shadow(0 4px 12px rgba(95, 191, 170, 0.3));
        }
      }

      .system-title {
        font-size: 32px;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: 10px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .system-subtitle {
        font-size: 14px;
        color: #909399;
        letter-spacing: 1px;
      }
    }

    .login-form {
      .login-button {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        margin-top: 10px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
        border: none;
        box-shadow: var(--shadow-md);
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-lg);
        }
      }

      .register-button {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        border: 2px solid var(--color-primary-light);
        color: var(--color-primary);
        background: transparent;
        
        &:hover {
          background: var(--color-primary-lighter);
          transform: translateY(-2px);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
      }
    }

    .login-footer {
      margin-top: 30px;
      text-align: center;
      
      p {
        font-size: 13px;
        color: #909399;
        margin: 8px 0;
      }

      .copyright {
        font-size: 12px;
        color: #C0C4CC;
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
</style>

